<#assign base=springMacroRequestContext.getContextUrl("")>
<!doctype html>
<html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>格 利 尔 智 慧 云 平 台</title>
    <link rel="icon" href="${base}/logo.png">
    <link rel="stylesheet" href="${base}/main/css/style4.css">
    <script>
    </script>
</head>
<!-- 头部模块 -->
<header >

    <h1 class="flex_row">
        <span class="sm_box"></span>
        <span class="cen_box">格 利 尔 智 慧 云 平 台</span>
        <span class="sm_box" style="margin-top: 0px;cursor:pointer" onclick="goSys()">转到后台</span>
    </h1>

</header>


<!-- 主题模块 -->
<div class="main flex_row">

    <!-- left -->
    <div class="left flex_column">
        <div class="up">
            <div class="top5">
                <div class="top5-title">
                    <span>控制中心</span>
                </div>
                <div class="top5-content">
                    <div class="sale">

                        <ul>
                            <li>
                               <div class="ledChart"></div>
                            </li>
                            <li>
                                <div class="webcamsChart"></div>

                            </li>
                            <li>
                                <div class="lightChart"></div>
                            </li>

                            <li>
                                 <div class="sensorChart"></div>
                            </li>
                            <li>
                                <div class="radioChart"></div>
                            </li>

                        </ul>

                    </div>

                </div><!--top5-content end 控制中心-->
            </div><!--top5 end 控制中心-->
        </div><!--up end 控制中心-->

        <div class="mid flex_column">
            <div class="chart_title"><span>人群监测</span></div>
            <div class="roundChart"></div>
        </div><!--mid end 人群监测-->

        <div class="down">
            <div class="down_title flex_column"><span>用电报表</span></div>
            <div class="pillarChart"></div>
        </div><!--down end 用电报表-->
    </div>
    <!-- left  end-->

    <!-- middle-->
    <div class="middle">
        <div class="total" >
            <div class="data1">
                <span>设备在线率</span>
                <p id="zaixian_lv"></p>
            </div>
            <div class="data2">
                <span>设备总数</span>
                <p id="all_count"></p>
            </div>
            <div class="data3">
                <span>路灯用电量(kwh)</span>
                <p id="power_sum"></p>
            </div>
            <div class="data4">
                <span>平均功率(W)</span>
                <p id="power_avg"></p>
            </div>


            <canvas class="rain"></canvas>

            <canvas class="dashed"></canvas>
            <div class="sphere">
                <div class="sphere-bg"></div>
                <div class="sum">
                    <span>当年总用电量(kwh)</span>
                    <p id="year_electricity"></p>
                </div>
            </div>
            <div class="cicle3"></div>
            <div class="cicle4"></div>
            <div class="cicle5"></div>
            <div class="cicle6"></div>
            <div class="cicle7"></div>
            <div class="cicle8">
                <span id="power_sum_zhong"></span>
                <p>路灯用电量(wkh)</p>
            </div>
            <div class="cicle9">
                <span id="zaixian_lv_zhong"></span>
                <p>设备在线率</p>
            </div>
            <div class="cicle10">
                <span id="all_countz_zhong"></span>
                <p>设备总数</p>
            </div>
            <div class="cicle11">
                <span id="power_avg_zhong"></span>
                <p>平均功率(W)</p>
            </div>
        </div><!--total end 主体部分-->
    </div>
    <!--middle end 主体部分-->

    <!-- right-->
    <div class="right flex_column">
        <div class="up pie flex_row">
            <div class="up_left flex_column">
                <div class="up_title">节约能源</div>
                <div class="ringChart"></div>
            </div>
            <div class="up_right flex_column">
                <div class="up_title">故障率</div>
                <div class="faultAlerm_Chart"></div>
            </div>
        </div>
        <div class="mid flex_column" id="sensor_div">

        </div>
        <div class="down">
            <div class="right_title"><span>功率报表</span></div>
            <div class="lineChart"></div>
        </div>
    </div>
    <!-- right  end-->
</div>

<!-- 底部模块 -->
<div class="bottom">
    <h5><span>数据状况</span></h5>
    <p>Data Status</p>
</div>
</body>
<script src="${base}/main/js/jquery-1.11.0.min.js"></script>
<script src="${base}/main/js/echarts.min.js"></script>
<script>
    $(function () {
        // 定义字体大小
        function placeholderPic() {
            w = document.documentElement.clientWidth / 80;
            document.documentElement.style.fontSize = (w) + 'px';
        }
        placeholderPic()

        // 中间虚线

        function dashed() {

            var canvas = document.querySelector('.dashed')
            var ctx = canvas.getContext('2d')
            var w = canvas.width = document.querySelector('.total').clientWidth
            var h = canvas.height = document.querySelector('.total').clientHeight / 3 * 2
            ctx.lineWidth = 3
            ctx.setLineDash([3, 3]);
            ctx.fillStyle = '#93f8fb'
            ctx.shadowOffsetX = 0;
            // 阴影的y偏移
            ctx.shadowOffsetY = 0;
            // 阴影颜色
            ctx.shadowColor = '#93f8fb';
            // 阴影的模糊半径
            ctx.shadowBlur = 15;
            ctx.save()  //缓存初始状态
            // 绘制第一条曲线
            ctx.beginPath()
            var grd = ctx.createLinearGradient(w / 11 * 2, h / 3, w / 5 * 2, h);
            grd.addColorStop(0, "#54e2e6");
            grd.addColorStop(1, "#065261");
            ctx.strokeStyle = grd;
            ctx.moveTo(w / 5 * 2, h)
            ctx.quadraticCurveTo(w / 5, h / 6 * 5, w / 11 * 2, h / 3);
            ctx.stroke();
            // 绘制第一条曲线上的圆光效果
            ctx.beginPath()
            ctx.moveTo(w / 11 * 2, h / 3)
            ctx.arc(w / 11 * 2, h / 3, 5, 0, Math.PI * 2)
            ctx.fill()
            ctx.restore()
            ctx.save()
            // 绘制第二条线
            ctx.beginPath()
            var grd = ctx.createLinearGradient(w / 11 * 3.3, h / 2, w / 3 * 1.1, h / 6 * 5);
            grd.addColorStop(0, "#e08d03");
            grd.addColorStop(1, "#2e6a5c");
            ctx.strokeStyle = grd;
            ctx.moveTo(w / 3 * 1.1, h / 6 * 5)
            ctx.quadraticCurveTo(w / 5 * 1.5, h / 6 * 4.2, w / 11 * 3.3, h / 2);
            ctx.stroke();
            // 绘制第二条曲线上的圆光效果
            ctx.beginPath()
            ctx.moveTo(w / 11 * 3.3, h / 2)
            ctx.arc(w / 11 * 3.3, h / 2, 5, 0, Math.PI * 2)
            ctx.fill()
            ctx.restore()
            ctx.save()
            // 绘制第三条线
            ctx.beginPath()
            var grd = ctx.createLinearGradient(w / 3 * 1.4, h / 5, w / 5 * 2, h / 2);
            grd.addColorStop(0, "#e08d03");
            grd.addColorStop(1, "#2e6a5c");
            ctx.strokeStyle = grd;
            ctx.moveTo(w / 5 * 2, h / 2 )
            ctx.quadraticCurveTo(w / 3 * 1.2, h / 4 * 1.4, w / 3 * 1.4, h / 5);
            ctx.stroke();
            // 绘制第三条曲线上的圆光效果
            ctx.beginPath()
            ctx.moveTo(w / 3 * 1.4, h / 5)
            ctx.arc(w / 3 * 1.4, h / 5, 5, 0, Math.PI * 2)
            ctx.fill()
            ctx.restore()
            ctx.save()
            // 绘制第四条线
            ctx.beginPath()
            var grd = ctx.createLinearGradient(w / 5 * 3.1, h / 3*1.2, w / 5 * 3.2, h / 2 * 1.5);
            grd.addColorStop(0, "#e08d03");
            grd.addColorStop(1, "#2e6a5c");
            ctx.strokeStyle = grd;
            ctx.moveTo(w / 5 * 3.2, h / 2 * 1.5)
            ctx.quadraticCurveTo(w / 5 * 3.35, h / 2 * 1.2, w / 5 * 3.1, h / 3*1.2);
            ctx.stroke();
            // 绘制第四条曲线上的圆光效果
            ctx.beginPath()
            ctx.moveTo( w / 5 * 3.1, h / 3*1.2)
            ctx.arc( w / 5 * 3.1, h / 3*1.2, 5, 0, Math.PI * 2)
            ctx.fill()
            ctx.restore()
            ctx.save()
            // 绘制第五条线
            ctx.beginPath()
            var grd = ctx.createLinearGradient(w / 5 * 3.3, h / 4, w / 5 * 3.2, h / 2 * 1.9);
            grd.addColorStop(0, "#e08d03");
            grd.addColorStop(1, "#2e6a5c");
            ctx.strokeStyle = grd;
            ctx.moveTo(w / 5 * 3.03, h / 2 * 1.9)
            ctx.quadraticCurveTo(w / 5 * 3.8, h / 2 * 1.2, w / 5 * 3.3, h / 4);
            ctx.stroke();
            // 绘制第五条曲线上的圆光效果
            ctx.beginPath()
            ctx.moveTo(w / 5 * 3.3, h / 4)
            ctx.arc(w / 5 * 3.3, h / 4, 5, 0, Math.PI * 2)
            ctx.fill()
            ctx.restore()
            ctx.save()
            // 绘制第六条线
            ctx.beginPath()
            var grd = ctx.createLinearGradient(w / 5 * 3.8, h / 2*1.2, w / 5 * 2.9, h);
            grd.addColorStop(0, "#e08d03");
            grd.addColorStop(1, "#2e6a5c");
            ctx.strokeStyle = grd;
            ctx.moveTo(w / 5 * 2.9, h)
            ctx.quadraticCurveTo(w / 5 * 3.7, h / 2 * 1.6, w / 5 * 3.8, h / 2*1.2);
            ctx.stroke();
            // 绘制第六条曲线上的圆光效果
            ctx.beginPath()
            ctx.moveTo(w / 5 * 3.8, h / 2*1.2)
            ctx.arc(w / 5 * 3.8, h / 2*1.2, 5, 0, Math.PI * 2)
            ctx.fill()
        }
        dashed();


        // 中间背景雨
        function rainBg() {
            var c = document.querySelector(".rain");
            var ctx = c.getContext("2d");//获取canvas上下文
            var w = c.width = document.querySelector('.total').clientWidth;
            var h = c.height = document.querySelector('.total').clientHeight;
            //设置canvas宽、高

            function random(min, max) {
                return Math.random() * (max - min) + min;
            }

            function RainDrop() { }
            //雨滴对象 这是绘制雨滴动画的关键
            RainDrop.prototype = {
                init: function () {
                    this.x = random(0, w);//雨滴的位置x
                    this.y = h;//雨滴的位置y
                    this.color = 'hsl(180, 100%, 50%)';//雨滴颜色 长方形的填充色
                    this.vy = random(4, 5);//雨滴下落速度
                    this.hit = 0;//下落的最大值
                    this.size = 2;//长方形宽度
                },
                draw: function () {
                    if (this.y > this.hit) {
                        var linearGradient = ctx.createLinearGradient(this.x, this.y, this.x, this.y + this.size * 30)
                        // 设置起始颜色
                        linearGradient.addColorStop(0, '#14789c')
                        // 设置终止颜色
                        linearGradient.addColorStop(1, '#090723')
                        // 设置填充样式
                        ctx.fillStyle = linearGradient
                        ctx.fillRect(this.x, this.y, this.size, this.size * 50);//绘制长方形，通过多次叠加长方形，形成雨滴下落效果
                    }
                    this.update();//更新位置
                },
                update: function () {
                    if (this.y > this.hit) {
                        this.y -= this.vy;//未达到底部，增加雨滴y坐标
                    } else {
                        this.init();
                    }
                }
            };

            function resize() {
                w = c.width = window.innerWidth;
                h = c.height = window.innerHeight;
            }

            //初始化一个雨滴

            var rs = []
            for (var i = 0; i < 10; i++) {
                setTimeout(function () {
                    var r = new RainDrop();
                    r.init();
                    rs.push(r);
                }, i * 300)
            }

            function anim() {
                ctx.clearRect(0, 0, w, h);//填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
                for (var i = 0; i < rs.length; i++) {
                    rs[i].draw();//绘制雨滴
                }
                requestAnimationFrame(anim);//控制动画帧
            }

            window.addEventListener("resize", resize);
            //启动动画
            anim()

        }
        rainBg();

        // 鞋服配

        function draw(ele, val, con, max, color) {
            var chart = echarts.init(document.querySelector(ele))
            var value = val
            option = {
                grid: {
                    left: '23%',
                    top: '0',
                    right: '13%',
                    bottom: '10'
                },
                "xAxis": {
                    type: 'value',
                    "splitLine": {
                        "show": false
                    },
                    "axisLine": {
                        "show": false
                    },
                    "axisLabel": {
                        "show": false
                    },
                    "axisTick": {
                        "show": false
                    }
                },
                "yAxis": [{
                    "type": "category",
                    "inverse": true,
                    "data": [con],
                    "axisLine": {
                        "show": false
                    },
                    "axisTick": {
                        "show": false
                    },
                    "axisLabel": {
                        show: true,
                        color: '#c1bfbf',
                        fontSize: 0.63 * w,
                    }
                }],
                "series": [
                    {
                        type: 'pictorialBar',
                        data: [value],

                        itemStyle: {
                            normal: {
                                color: color
                            }
                        },
                        symbolRepeat: 'fixed',
                        symbolClip: true,
                        symbolSize: [0.35 * w, w],
                        symbol: 'roundRect',
                        label: {
                            show: false,
                            position: 'left',
                            formatter: function () {
                                return con
                            },

                            color: '#c1bfbf',
                            fontSize: 0.63 * w,
                        },
                        z: 800
                    },
                    {
                        type: 'pictorialBar',
                        itemStyle: {
                            normal: {
                                color: '#193040'
                            }
                        },
                        data: [max],
                        animationDuration: 0,
                        symbolRepeat: 'fixed',
                        // symbolMargin: '20%',
                        symbol: 'roundRect',
                        symbolSize: [0.35 * w, w],
                        label: {
                            show: true,
                            position: 'right',
                            formatter: function () {
                                return Math.floor(val * 100 / max) + '%'
                            },
                            color: '#c1bfbf',
                            fontSize: 0.63 * w,
                        }
                    }
                ]
            };
            chart.setOption(option)
        }



        //折线图---新
        function lineChartN(ele,dateTime,dataValue) {
            var chart = echarts.init(document.querySelector(ele));
            option = {
                title: {
                    text: "",
                    textStyle: {
                        color: "rgb(193, 191, 191)"
                    }
                },
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    data: ["平均功率(w)"],
                    x: "center",
                    borderWidth: 0,
                    padding: 10,
                    textStyle: {
                        color: "rgb(155, 152, 152)",
                        fontSize: 14
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {
                            readOnly: true,
                            show: false
                        },
                        magicType: {
                            show: false,
                            type: ["line", "bar"]
                        },
                        restore: {
                            show: false
                        },

                        saveAsImage: {
                            show: false
                        },
                        dataZoom: {
                            show: false
                        },
                        mark: {
                            show: false
                        }
                    },
                    showTitle: false
                },
                calculable: false,
                xAxis: [
                    {
                        type: "category",
                        scale: false,
                        boundaryGap: false,
                        data: dateTime,
                        axisLabel: {
                            textStyle: {
                                color: "rgb(155, 147, 147)"
                            },

                        },
                        axisLine: {
                            lineStyle: {
                                color: "#48b"
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        name: "W",
                        nameTextStyle: {
                            color: "rgb(196, 234, 252)",
                            fontSize: 12
                        },
                        scale: true,
                        axisLine: {
                            lineStyle: {
                                color: "#48b"
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "rgb(173, 173, 173)",
                                fontSize: 12
                            }
                        },
                        splitArea: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                width: 1,
                                color: "rgb(20,68, 82)"
                            }
                        }
                    }
                ],
                series: [
                    {
                        type: "line",
                        name: "平均功率(w)",
                        data: dataValue
                    }
                ],
                color: ["rgb(88, 230, 234)", "rgb(120, 191, 232)", "rgb(80, 168, 176)", "#32cd32", "rgb(78, 130, 219)", ],

            };

            chart.setOption(option)
        }






        //柱状图
        function pillarChart(ese,dateTime,dataValue){
            var myChart = echarts.init(document.querySelector(ese));

            var option={
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    data: ["用电量(kwh)"],
                    textStyle: {
                        color: "rgb(155, 152, 152)",
                    }
                },
                toolbox: {
                    show: false,
                    feature: {
                        dataView: {
                            readOnly: true
                        },
                        magicType: {
                            type: ["line", "bar"],
                            show: false
                        }
                    }
                },
                calculable: false,
                xAxis: [
                    {
                        type: "category",
                        data: dateTime,
                        axisLabel: {
                            textStyle: {
                                color: "rgb(155, 147, 147)"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#48b"
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            textStyle: {
                                color: "rgb(173, 173, 173)",
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgb(20,68, 82)"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#48b"
                            }
                        },
                    }
                ],
                series: [
                    {
                        name: "用电量(kwh)",
                        type: "bar",
                        data: dataValue,
                        tooltip: {
                            borderWidth: 1
                        }
                    }
                ],
                color: ["rgb(0, 191, 191)", "rgb(120, 191, 232)", "rgb(80, 168, 176)"]


            };
            myChart.setOption(option);
        }


        //饼状图
        function roundChart(exe){

            // 基于准备好的dom，初始化echarts实例
            // var myChart = echarts.init(document.getElementById('main'));
            var myChart = echarts.init(document.querySelector(exe));

            var option={
                /* title: {
                     text: "行人监测",
                     x: "center",
                     textStyle: {
                         color: "rgb(168, 168, 173)"
                     }
                 },*/
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    y: "center",

                    data: ["机动车", "非机动车", "行人", "其他"],


                    textStyle: {
                        color: "rgb(211, 211, 211)"
                    },
                    orient: "vertical",
                    x: "left",
                    itemGap: 26,
                    padding: 10
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {
                            readOnly: true,
                            show: false
                        },
                        saveAsImage: {
                            show: false
                        },
                        restore: {
                            show: false
                        }
                    }
                },
                calculable: true,
                series: [
                    {
                        name: "面积模式",
                        type: "pie",
                        radius: [30, 90],
                        center: ["50%", "50%"],
                        roseType: "area",
                        data: [
                            {
                                value: 20,
                                name: "机动车"
                            },
                            {
                                value: 36,
                                name: "非机动车"
                            },
                            {
                                value: 24,
                                name: "行人"
                            },
                            {
                                value: 18,
                                name: "其他"
                            }
                        ],
                        textStyle: {
                            color: "rgb(211, 193, 195)",
                            fontWeight: "bold",
                            fontSize: 14
                        }
                    }
                ],
                /*color: ["rgb(141, 114, 27)", "rgb(222, 152, 2)", "rgb(34, 113, 136)", "rgb(80,168,176)" ]*/
                color: ["rgb(141, 114, 27)", "rgb(240, 155, 10)", "rgb(80,168,176)", "rgb(0, 217, 236)" ]
            }


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
        roundChart('.roundChart');



        //百分比插图
        function percentChart(ele){

            var e=80;
            var Chart4 = echarts.init(document.querySelector(ele));
            option = {
                title:{
                    show:true,
                    text:e+'%',
                    x:'center',
                    y:'center',
                    textStyle: {
                        fontSize: '15',
                        color:'white',
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{d}%",
                    show:false
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    show:false
                },
                series:
                        {
                            name:'',
                            type:'pie',
                            radius: ['65%', '85%'],
                            avoidLabelOverlap: true,
                            hoverAnimation:false,
                            label: {
                                normal: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:e, name:''},
                                {value:100-e, name:''}
                            ]
                        }

            };
            Chart4.setOption(option);

        }

      //  percentChart('.percentChart');

        // TOP5颜色循环

        function topColor() {

            var ele = $('.top5-content ul').children();
            var length = ele.length;
            var i = 1;
            setInterval(function () {
                $(ele[i]).find('.cicle').css({
                    'background': 'url(./images/orange.png) no-repeat center',
                    'backgroundSize': '100%'
                })
                $(ele[i]).find('.li-content').css({
                    'background': 'url(./images/border2.png) no-repeat center',
                    'backgroundSize': 'contain'
                })
                $(ele[i]).siblings().find('.cicle').css({
                    'background': 'url(./images/green.png) no-repeat center',
                    'backgroundSize': '100%'
                })
                $(ele[i]).siblings().find('.li-content').css({
                    'background': 'url(./images/border.png) no-repeat center',
                    'backgroundSize': 'contain'
                })
                i++
                if (i == length) {
                    i = 0
                }
            }, 3000)
        }
        topColor();


        // 水波图

        function waterChart(ele) {

            var myChart = echarts.init(document.querySelector(ele));
            option = {
                series: [{
                    color:['#09828e','#09c2c8'],
                    type: 'liquidFill',
                    data: [0.78, 0.78],
                    radius: '90%',
                    outline: {
                        show: false
                    },
                    backgroundStyle: {
                        color:'transparent',
                        borderColor: '#0ac1c7',
                        borderWidth: 1,
                        shadowColor: 'rgba(0, 0, 0, 0.4)',
                        shadowBlur: 20
                    },
                    shape: 'path://"M61.3,2c6.2,0,12.1,1.1,17.5,3.4C84.3,7.7,89,10.8,93,14.6c4.1,4,7.3,8.6,9.7,13.8c2.4,5.2,3.5,10.9,3.5,16.9c0,8.1-2.4,16.9-7.1,26.4c-4.7,9.4-9.9,18.2-15.5,26.2c-5.6,8-13.1,17.4-22.4,28.1c-9.3-10.7-16.8-20-22.4-28.1c-5.6-8-10.8-16.8-15.5-26.2c-4.7-9.4-7.1-18.2-7.1-26.4c0-6,1.2-11.6,3.5-16.9c2.4-5.2,5.6-9.8,9.7-13.8c4-3.9,8.8-7,14.2-9.2C49.2,3.1,55,2,61.3,2L61.3,2z"',
                    label: {
                        normal: {
                            position: ['50%', '50%'],
                            formatter: function () {
                                return '78%';
                            },
                            textStyle: {
                                fontSize: 0.5 * w,
                                color: '#D94854'
                            }
                        }
                    }
                }]
            }
            myChart.setOption(option)
        }
       // waterChart('.chart1')
       // waterChart('.chart2')
        function ringChart(ele,value){
            // 基于准备好的dom，初始化echarts实例
            var e=value;

            var Chart4 = echarts.init(document.querySelector(ele));
            option = {
                title:{
                    show:true,
                    text:e+'%',
                    x:'center',
                    y:'center',
                    textStyle: {
                        fontSize: '20',
                        color:'rgb(13,208,234)',
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{d}%",
                    show:false
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    show:true
                },
                series:
                        {
                            name:'',
                            type:'pie',
                            radius: ['65%', '85%'],
                            avoidLabelOverlap: true,
                            hoverAnimation:false,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            data:[
                                {value:e, name:''},
                                {value:100-e, name:''}
                            ]
                        },
                color: ["rgb(12, 129, 138)","rgb(46, 65, 81)"]

            };
            Chart4.setOption(option);

        }


//环形  百分比插图
        function ringChart2(ele,v1,v2){
            // 基于准备好的dom，初始化echarts实例
            var e=v1;
            var Chart4 = echarts.init(document.querySelector(ele));
            option = {
                title:{
                    show:true,
                    text:e+'%',
                    x:'center',
                    y:'center',
                    textStyle: {
                        fontSize: '20',
                        color:'rgb(13,208,234)',
                        fontWeight: 'normal'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{d}%",
                    show:false
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    show:true
                },
                series:
                        {
                            name:'',
                            type:'pie',
                            radius: ['65%', '85%'],
                            avoidLabelOverlap: true,
                            hoverAnimation:false,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center'
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true
                                }
                            },
                            data:[
                                {value:e, name:''},
                                {value:v2-e, name:''}
                            ]
                        },
                color: ["rgb(145,107,28)","rgb(46, 65, 81)"]

            };
            Chart4.setOption(option);
        }


        $.ajax({
            url:'getMainData?X-Access-Token=${AccessToken}',
            success:function(data){
                draw('.ledChart', data.attributes.zaixian_led, 'LED灯在线率', data.attributes.ledcount, '#09c4ca');
                draw('.webcamsChart',data.attributes.zaixian_video, '摄像头在线率', data.attributes.videocount, '#09c4ca');
                draw('.lightChart', data.attributes.zaixian_gateway, '网关在线率', data.attributes.gatewaycount, '#09c4ca');
                draw('.sensorChart', data.attributes.zaixian_sensor, '传感器在线率', data.attributes.sensorcount, '#09c4ca');
                draw('.radioChart', data.attributes.zaixian_radio, '音柱在线率', data.attributes.radiocount, '#09c4ca');

                $("#power_avg").html(data.attributes.power_avg);
                $("#power_avg_zhong").html(data.attributes.power_avg);
                $("#power_sum_zhong").html(data.attributes.power_sum);
                $("#power_sum").html(data.attributes.power_sum);

                $("#all_count").html(data.attributes.all_count);

                $("#zaixian_lv_zhong").html(data.attributes.zaixianlv+"%");
                $("#zaixian_lv").html(data.attributes.zaixianlv+"%");


                $("#all_countz_zhong").html(data.attributes.all_count);
                $("#year_electricity").html(data.attributes.power_sum);


                //ringChart2('.faultAlerm_Chart',data.attributes.guzhang_count,data.attributes.ligth_count);
                ringChart2('.faultAlerm_Chart',0,data.attributes.ligth_count);


            }
        });
        //触感器信息
        $.ajax({
            url:'getSenSor?X-Access-Token=${AccessToken}',
            success:function(data){
               $("#sensor_div").html(data);
            }
        });
        //触感器信息
        $.ajax({
            url:'getEchartLightPoweerDate?X-Access-Token=${AccessToken}',
            success:function(data){
                ringChart('.ringChart',data.attributes.jieyuemenghao);
                pillarChart('.pillarChart',data.attributes.dateList,data.attributes.electricityList);
                lineChartN('.lineChart',data.attributes.dateList,data.attributes.avg_powerList);
            }
        });

    })

 function goSys(){
     window.location.href="http://www.gloriasmart.com/dashboard/analysis";
 }
</script>
</html>
